<div class="row ad-table-pagination-container"
     ng-if="items.allItems.length > items.paging.pageSizes[0] && !attrs.disablePaging">
  <div class="col-md-8 col-sm-8 text-left">
    <ul ng-class="attrs.paginationBtnGroupClasses || 'pagination pagination-sm'">
      <li>
        <a ng-click="loadPage(1)"
           class="ad-cursor-pointer"
           ng-disabled="items.paging.currentPage == 1">
          <i ng-class="iconClasses.firstPage"></i>
        </a>
      </li>
      <li>
        <a ng-if="!attrs.draggable"
           class="ad-cursor-pointer"
           ng-click="loadPreviousPage()"
           ng-disabled="items.paging.currentPage == 1">
          <i ng-class="iconClasses.previousPage"></i>
        </a>
      </li>
      <li>
        <a id="btnPrev"
           class="ad-cursor-pointer"
           ng-if="attrs.draggable"
           ad-drop="true"
           ad-drop-over="onNextPageButtonOver($data, $dragElement, $dropElement, $event)"
           ad-drop-leave="onNextPageButtonLeave($data, $dragElement, $dropElement, $event)"
           ad-drop-end="onNextPageButtonDrop($data, $dragElement, $dropElement, $event)"
           ng-click="loadPreviousPage()"
           ng-disabled="items.paging.currentPage == 1">
          <i ng-class="iconClasses.previousPage"></i>
        </a>
      </li>
      <li ng-repeat="page in localConfig.pagingArray"
          ng-class="{active: items.paging.currentPage == page}">
        <a ng-click="loadPage(page)" class="ad-cursor-pointer">
          {{ page }}
        </a>
      </li>
      <li>
        <a ng-if="!attrs.draggable"
           class="ad-cursor-pointer"
           ng-click="loadNextPage()"
           ng-disabled="items.paging.currentPage == items.paging.totalPages">
          <i ng-class="iconClasses.nextPage"></i>
        </a>
      </li>
      <li>
        <a id="btnNext"
           class="ad-cursor-pointer"
           ng-if="attrs.draggable"
           ad-drop="true"
           ad-drop-over="onNextPageButtonOver($data, $dragElement, $dropElement, $event)"
           ad-drop-leave="onNextPageButtonLeave($data, $dragElement, $dropElement, $event)"
           ad-drop-end="onNextPageButtonDrop($data, $dragElement, $dropElement, $event)"
           ng-click="loadNextPage()"
           ng-disabled="items.paging.currentPage == items.paging.totalPages">
          <i ng-class="iconClasses.nextPage"></i>
        </a>
      </li>
      <li>
        <a ng-click="loadLastPage()"
           class="ad-cursor-pointer"
           ng-disabled="items.paging.currentPage == items.paging.totalPages">
          <i ng-class="iconClasses.lastPage"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="col-md-4 col-sm-4 text-right">
    <ul ng-class="attrs.paginationBtnGroupClasses || 'pagination pagination-sm'">
      <li ng-repeat="size in items.paging.pageSizes"
          ng-class="{active: items.paging.pageSize == size}">
        <a ng-click="pageSizeChanged(size)" class="ad-cursor-pointer">
          {{ size }}
        </a>
      </li>
    </ul>
  </div>
</div>